<template>
    <div class="order">
        <el-row :gutter="4" style="margin:10px 0px">
            <el-col :span="7">
                 <el-date-picker
                    v-model="selectDate"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
                <el-button @click="search('time')" type="primary">查询</el-button>
            </el-col>
            <el-col :span="3">
                <el-select @change="search('status')" v-model="status" clearable placeholder="按订单状态查询">
                    <el-option
                        v-for="item in orderStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="5">
                <el-input placeholder="按订单编号查询" v-model="orderNumber" class="input-with-select">
                    <el-button @click="search('num')" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="saleData" style="width: 100%" border>
                <el-table-column prop="orderId" label="订单编号" align="center">
                </el-table-column>
                <el-table-column prop="store.storeName" label="店铺名称" align="center">
                </el-table-column>
                <el-table-column sortable prop="deliverType" label="收货方式" align="center">
                    <template slot-scope="props">
                        <span style="color: blue">{{props.row.deliverType}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="goodsMoney" label="总金额" align="center">
                </el-table-column>
                <el-table-column sortable prop="orderStatus" label="状态" align="center">
                    <template slot-scope="props">
                        <span style="color:pink;">{{props.row.orderStatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="payType" label="支付方式" align="center">
                    <template slot-scope="props">
                        <span style="color: rgb(103, 194, 58);">{{props.row.payType}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isInvoice" label="发票" align="center">
                    <template slot-scope="props">
                        <span style="color: rgb(103, 194, 58);">{{props.row.isInvoice}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateDate" label="订单备注" align="center">
                </el-table-column>
                <el-table-column prop="updateDate" label="下单时间" align="center">
                </el-table-column>
                <el-table-column prop="orderSrc" label="订单来源" align="center">
                     <template slot-scope="props">
                        <span style="color: rgb(103, 194, 58);">{{props.row.orderSrc}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--primary el-tag--small" style="cursor: pointer;" @click="orderDetail(scope.row)" size="mini">
                            订单详情
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 50, 100, 200]"
                :page-size="pageSize"
                layout="->, sizes, prev, pager, next, jumper, total"
                :total="totalElements"
            ></el-pagination>
        </el-row>
        <orderDetail :off.sync="orderDialog" :rowData="rowdata"></orderDetail>
    </div>
</template>


<script>
import { getOrderList } from "@/api/supermarket/order.js"
import * as util from "@/util/util.js"
export default {
    name: "saleDetail",
    components: {
        "orderDetail": () => import("@/views/goodsSupermarket/companyOrder/orderDetail.vue")
    },
    data(){
        return {
            rowdata: {},
            orderDialog: false,
            status: "",
            orderNumber: "",
            orderStatus: [
                {label: "待收货", value: 0},
                {label: "配送中", value: 1},
                {label: "已确认收货", value: 2},
                {label: "用户拒收", value: 3},
                {label: "未付款", value: 4},
                {label: "用户取消", value: 5},
            ],
            selectDate: "",
            saleData: [],
            pageSize: 15,
            currentPage: 1,
            totalElements: 0,
            totalPages: 1,
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                }
            }]
            },
        }
    },
    computed: {
        storeId(){
            return JSON.parse(localStorage.getItem("user")).storeId;
        }
    },
    created(){
        this.getList();
    },
    methods: {
        search(type){
            this.getList(type);
        },
        getList(type){
                let obj = {
                   storeId: this.storeId,
                   currentPage: this.currentPage,
                   pageSize: this.pageSize,
                };
                // if(type == "time"){
                //    var createdDate = util.timestampToTime(new Date(this.selectDate[0]));
                //    var updateDate = util.timestampToTime(new Date(this.selectDate[1]));
                //    obj = Object.assign({createDate: createdDate, updateDate: updateDate}, obj);
                // }else if(type == "num"){
                //    obj = Object.assign({goodsNum: this.goodsNumber}, obj);
                // }else if(type == "status"){
                //    obj = Object.assign({status: this.status}, obj);
                // }else if(type == "clear"){
                //     this.status = "";
                //     this.goodsName = "";
                //     this.goodsNumber = "";
                //     obj = Object.assign({}, obj);
                // }
                 getOrderList(obj).then(
                    res => {
                        console.log("res公司订单接口", res);
                        this.saleData = res.data.list;
                        this.saleData.forEach((e) => {
                            e.payType = e.payType == 1 ? "在线支付" : "";
                            e.isInvoice = e.isInvoice == 1 ? "需要" : "";
                            e.deliverType = e.deliverType == 0 ? "送货上门" : "";
                            e.orderStatus = e.orderStatus == 4 ? "未付款" : "";
                            e.orderSrc = e.orderSrc == 4 ? "苹果APP" : "";
                        });
                        // this.noticeData.forEach((e) => {
                        //     e.createDate = util.timestampToTime(e.createDate);
                        // });
                        this.totalElements = res.data.total;
                    },
                    err => {}
                );
            },
        //发货
        shipments(row){

        },
        orderDetail(row){
            console.log("row", row);
            this.rowdata = row;
            this.orderDialog = true;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
            console.log(`当前页: ${val}`);
        }
    }
}
</script>